<template>
  <div>
    <el-container>
      <el-aside width="260px">
        <el-tree
          :highlight-current="true"
          :default-expand-all="true"
          :data="treeData"
          :props="defaultProps"
          @node-click="handleNodeClick"
        ></el-tree>
      </el-aside>
      <el-container>
        <el-main>
          <div class="menuButton">
            <el-button size="mini" type="primary" @click="addMenu">新增菜单</el-button>
            <el-button size="mini" type="danger" @click="deleteMenu">删除</el-button>
          </div>
          <el-form ref="form" v-show="deleteShow" :model="form" label-width="100px">
            <el-row>
              <el-col :span="10">
                <el-form-item label="事项名称">
                  <span class="font">{{itemName}}</span>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="菜单ID">
                  <span class="font">{{menuId}}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="菜单名称">
                  <el-input v-model="menuName" placeholder="菜单名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="菜单URL">
                  <el-input v-model="url" placeholder="菜单URL"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="菜单类型">
                  {{radio | formateType}}
                  <!-- <el-radio v-model="radio" label="0">公有</el-radio> -->
                  <!-- <el-radio v-model="radio" label="1">私有</el-radio> -->
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="2">
                <el-form-item label="应用状态">
                  <span>{{isUse | isUseFilters}}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="bigWrap" v-show="!deleteShow">
            <el-form label-width="80px">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="所属大类">
                    <span class="font">{{bigName}}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="事项ID">
                    <span class="font">{{bigId}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="事项名称">
                    <span class="font">{{bigItemName}}</span>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <el-table :data="bigTableData" border style="width: 100%">
              <el-table-column prop="label" label="菜单名称" width="180"></el-table-column>
              <el-table-column prop="detail.type" label="菜单类型" width="180">
                <template slot-scope="scope">
                  <span>{{ scope.row.detail.type | formateType}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="detail.url" label="菜单URL"></el-table-column>
            </el-table>
          </div>

          <el-row class="footer" v-show="deleteShow">
            <div>
              <el-button type="primary" @click="onSubmit">{{this.isSave?"保存":"编辑"}}</el-button>
              <el-button>取消</el-button>
            </div>
          </el-row>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
const PAGESIZE = 1000;
export default {
  created() {
    this._initq();
  },
  inject: ["reload"],
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      bigTableData: [],
      form: {},
      radio: "0",
      url: "",
      itemName: "",
      menuId: "",
      itemId: "",
      menuName: "",
      deleteId: "",
      deleteShow: true,
      bigName: "",
      bigId: "",
      bigItemName: "",
      dataType: "proceeding",
      isSave: true,
      isUse:""
    };
  },
  filters: {
    formateType: function(value) {
      if (value == 1) {
        return "私有";
      }
      if (value == 0) {
        return "公有";
      }
    },
    isUseFilters: function(value) {
      if (value == 1) {
        return "已应用";
      }
      if (value == 0) {
        return "未应用";
      }
    }
  },
  methods: {
    _initq() {
      this.$post("/menu/levelList").then(data => {
        this.treeData = data.result;
      });
    },

    handleNodeClick(data) {
      this.dataType = data.type;
      console.log(data.type);
      console.log(this.dataType);
      if (data.type == "menu") {
        this.deleteShow = true;
      } else if (data.type == "proceeding") {
        console.log(data);
        this.bigItemName = data.label;
        this.bigName = data.detail.systemName;
        this.bigId = data.detail.id;
        this.deleteShow = false;

        this.bigTableData = data.children;
        console.log(this.bigTableData);
      }
      if (!data.children || data.children == []) {
        this.itemName = data.detail.proceedingName;
        this.menuName = data.detail.name;
        this.menuId = data.detail.id;
        this.deleteId = data.detail.id;
        this.url = data.detail.url;
        this.radio = String(data.detail.type);
        this.itemId = data.detail.proceedingId;
        this.isUse = data.detail.isUse
        console.log(data);
        this.isSave = false;
      }
    },
    onSubmit() {
      if (!this.menuName) {
        this.$message({
          type: "error",
          message: "菜单名称必填"
        });
        return;
      }
      if (this.dataType == "proceeding") {
        if (!this.bigId) {
          this.$message({
            type: "error",
            message: "请选择事项"
          });
          return;
        }
        this.$post("/menu/save", {
          proceedingId: this.bigId,
          name: this.menuName,
          url: this.url,
          type: this.radio
        }).then(data => {
          if (data) {
            this._initq();
            // this.isSave = false;
            if (this.isSave) {
              this.menuName = "";
              this.url = "";
              this.type = "";
              this.menuId = "";
            }
            this.$message({
              message: data.resultDes,
              type: "success"
            });
          }
        });
        return;
      }

      if (this.dataType == "menu") {
        // if (!this.itemId) {
        //   this.$message({
        //     type: "error",
        //     message: "请选择事项"
        //   });
        //   return;
        // }
        console.log(this.menuId);
        this.$post("/menu/save", {
          id: this.menuId,
          proceedingId: this.itemId,
          name: this.menuName,
          url: this.url,
          type: this.radio
        }).then(data => {
          if (data) {
            this._initq();
            if (this.isSave) {
              this.menuName = "";
              this.url = "";
              this.type = "";
              this.menuId = "";
            }
            this.$message({
              message: data.resultDes,
              type: "success"
            });
          }
        });
      }
    },
    addMenu() {
      this.isSave = true;
      // this.itemName = this.bigItemName;
      this.menuName = "";
      this.menuId = "";
      this.url = "";
      this.radio = "";
      this.deleteShow = true;
      if (this.dataType == "menu") {
        console.log(this.itemName);
        // this.itemName
      }
      if (this.dataType == "proceeding") {
        console.log(this.bigItemName);
        this.itemName = this.bigItemName;
        // this.itemName
      }
    },
    deleteMenu() {
      if (!this.itemName) {
        return;
      }
      this.$post("/menu/delete", {
        id: this.deleteId
      }).then(data => {
        if (data) {
          this.itemName = "";
          this.menuName = "";
          this.menuId = "";
          this.url = "";
          this.radio = "";
          this._initq();
          this.$message({
            message: data.resultDes,
            type: "warning"
          });
        }
      });
    }
  }
};
</script>

<style scoped lang="css">
.menuButton {
  display: flex;
  justify-content: flex-end;
}
.font {
  color: #909399;
}
.footer {
  display: flex;
  justify-content: flex-end;
  /* padding-right: 20px; */
}
</style>
